<!DOCTYPE html>
<!-- 
https://blog.csdn.net/qq_51478745/article/details/125700227
 -->
<html>
	<head>
		<meta charset="utf-8">

		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 500px;
				height: 500px;
				border: 10px solid rgb(168, 38, 166);
			}

			.move {
				width: 100px;
				height: 100px;
				background-color: blue;
				animation-name: moveBox;
				/*动画名称*/
				animation-duration: 2s;
				/*2s完成这件事情（周期2s）*/
				/* animation-iteration-count: infinite; */
				animation-iteration-count: 1;
				/*动画迭代次数：infinite 无限次; */
				animation-delay: 2s;
				/*延迟2s后才开始（延迟启动时间）*/
				animation-timing-function: linear;
				/*动画从头到尾速度相同（默认是以低速开始，然后加快，结束前变慢）*/

			}

			@keyframes moveBox {
				0% {
					transform: translate(0, 0);
					background-color: aqua;
				}

				25% {
					transform: translateX(400px) rotate(360deg);
					background-color: rebeccapurple;
					height: 50px;

				}

				50% {
					transform: translate(400px, 400px) rotate(90deg);
					background-color: black;
					width: 200px;
				}

				75% {
					transform: translate(0, 400px) rotate(360deg) scale(0.5);
					background-color: blue;
				}

				100% {
					transform: translate(0, 0) rotate(0deg);
					background-color: green;
				}
			}
			
			.box2{
				width: 100%;
				height: 300px;
				background-color: aquamarine;
			}
			.left{
				width: 300px;
				height: 200px;
				background-color: aqua;
				float: left;
			}
			.rigth{
				width: calc(100% - 400px);/* calc函数（自动计算动态宽度） 注意-前后有空格 */
				height: 200px;
				background-color: orange;
				float: right;
			}
			
			.download img{
				display: block;
				width: 100%;
				height: auto;
				margin-top: 40px;
				animation-iteration-count: infinite;
				animation-delay: 2s;
				animation-duration: 2s;
				animation-name: scaleDownLoad;
			}@keyframes scaleDownLoad{/* scaleDownLoad 对应动画名称 */
				0%{
					transform: scale(0.5);
				}
				
				50%{
					transform: scale(0.6);
				}
				
				100%{
					transform: scale(0.5);
				}
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="move"></div>
		</div>
		
		<div class="box2">
			<div class="left"></div>
			<div class="rigth"></div>
		</div>
		
		<div class="download">
			<img src="../images/download.png"/>
		</div>
		
	</body>
</html>